<template>
  <div class="box">
    <div class="top">
      <div
        class="point_box"
        :class="{ point_box2: screenWidth < 1920, dark_point_box: isDark }"
      >
        <div class="point_box_left">
          <!-- <div class="title">安全生产已达 {{ topData.safetyDays }} 天!</div> -->
          <!-- <div class="search_box">
            <el-input v-model="input" style="width: 76%;height:2.1875rem;" prefix-icon="Search" placeholder="请输入关键词" />
            <el-button type="primary" class="globalFontSize" style="width: 22%;height:2.1875rem;">查询</el-button>
          </div> -->
        </div>
        <div class="data_show globalFontSize">
          <div class="items">
            <!-- <img src="@/assets/images/home/实时测点.svg" alt=""> -->
            <div class="items_num">
              <div>分站异常</div>
              <div
                style="
                  font-size: 1.75rem;
                  font-weight: 700;
                  color: #fff;
                  margin-top: 10px;
                "
                :style="{ fontSize: pagesStore.sizeNum * 2 + 'px' }"
              >
                {{ state.fenzhanValue.errorCount }}
              </div>
            </div>
          </div>
          <div class="items">
            <!-- <img src="@/assets/images/home/测点断电.svg" alt=""> -->
            <div class="items_num">
              <div>分站正常</div>
              <div
                style="
                  font-size: 1.75rem;
                  font-weight: 700;
                  color: #fff;
                  margin-top: 10px;
                "
                :style="{ fontSize: pagesStore.sizeNum * 2 + 'px' }"
              >
                {{ state.fenzhanValue.normalCount }}
              </div>
            </div>
          </div>
          <div class="items">
            <!-- <img src="@/assets/images/home/测点断线.svg" alt=""> -->
            <div class="items_num">
              <div>测点异常</div>
              <div
                style="
                  font-size: 1.75rem;
                  font-weight: 700;
                  color: #ffb163;
                  margin-top: 10px;
                "
                :style="{ fontSize: pagesStore.sizeNum * 2 + 'px' }"
              >
                {{ state.cedianValue.errorCount }}
              </div>
            </div>
          </div>
          <div class="items">
            <!-- <img src="@/assets/images/home/测点报警.svg" alt=""> -->
            <div class="items_num">
              <div>测点正常</div>
              <div
                style="
                  font-size: 1.75rem;
                  font-weight: 700;
                  color: #fff;
                  margin-top: 10px;
                "
                :style="{ fontSize: pagesStore.sizeNum * 2 + 'px' }"
              >
                {{ state.cedianValue.normalCount }}
              </div>
            </div>
          </div>
          <div class="items">
            <!-- <img src="@/assets/images/home/测点报警.svg" alt=""> -->
            <div class="items_num">
              <div>电源异常</div>
              <div
                style="
                  font-size: 1.75rem;
                  font-weight: 700;
                  color: #ffb163;
                  margin-top: 10px;
                "
                :style="{ fontSize: pagesStore.sizeNum * 2 + 'px' }"
              >
                {{ state.dianyuanValue.errorCount }}
              </div>
            </div>
          </div>
          <div class="items">
            <!-- <img src="@/assets/images/home/测点报警.svg" alt=""> -->
            <div class="items_num">
              <div>电源正常</div>
              <div
                style="
                  font-size: 1.75rem;
                  font-weight: 700;
                  color: #fff;
                  margin-top: 10px;
                "
                :style="{ fontSize: pagesStore.sizeNum * 2 + 'px' }"
              >
                {{ state.dianyuanValue.normalCount }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="quick"
        :class="{ qeuick2: screenWidth < 1920, dark_quick: isDark }"
      >
        <div class="quick_head">
          <div
            class="title"
            :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }"
          >
            <img src="@/assets/images/图标.svg" alt="" />
            <div style="font-weight: 700; font-size: 14px">快捷入口</div>
          </div>
          <!-- <img src="@/assets/images/home/设置.svg" alt="" /> -->
        </div>
        <div class="quick_box">
          <div class="items globalFontSize" @click="historyRouterFn('2')">
            <div class="img">
              <img src="@/assets/images/home/历史断电.svg" alt="" />
            </div>
            <div>本周断电</div>
          </div>
          <div class="items globalFontSize" @click="historyRouterFn('1')">
            <div class="img">
              <img src="@/assets/images/home/历史断线.svg" alt="" />
            </div>
            <div>本周断线</div>
          </div>
          <div class="items globalFontSize" @click="historyRouterFn('0')">
            <div class="img">
              <img src="@/assets/images/home/历史报警.svg" alt="" />
            </div>
            <div>本周报警</div>
          </div>
          <div class="items globalFontSize" @click="biaoxiaoRouterFn">
            <div class="img">
              <img src="@/assets/images/home/本周标校.svg" alt="" />
            </div>
            <div>本周标校</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" :class="{ dark_bottom: isDark }">
      <div class="substation" :class="{ substation2: screenWidth < 1920 }">
        <div class="substation_head">
          <div
            class="title"
            :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }"
          >
            <img src="@/assets/images/图标.svg" alt="" />
            <div>分站</div>
            <div
              style="font-size: 0.875rem; font-weight: 400"
              :style="{ fontSize: pagesStore.sizeNum + 'px' }"
            >
              共 {{ state.fenzhanTableData.length }} 条记录
            </div>
          </div>
          <!-- <img src="@/assets/images/home/展开菜单.svg" alt="" /> -->
        </div>
        <div class="line"></div>
        <div class="select_box">
          <el-select
            @change="selectChangeFn"
            v-model="state.fenzhanSelectValue"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in state.fenzhanSelectData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="table">
          <el-table
            :data="state.fenzhanTableData"
            border
            :row-style="rowStyle"
            class="tableFontSize"
            cell-class-name="cellBorder"
            header-row-class-name="header"
            header-cell-class-name="header"
            row-class-name="rowHeight"
            style="width: 100%; height: calc(100%)"
            :header-row-style="{
              backgroundColor: isDark ? '#2b5477' : '#e3effe',
            }"
          >
            <el-table-column type="index" label="编号" />
            <el-table-column
              show-overflow-tooltip
              prop="address"
              label="安装地点"
            />
            <el-table-column
              show-overflow-tooltip
              prop="statusName"
              label="工作状态"
            >
              <template #default="scope">
                <span v-if="scope.row.alarm == true" style="color: red"
                  >报警</span
                >
                <span v-if="scope.row.networkError == true" style="color: red"
                  >网络故障</span
                >
                <span
                  v-if="scope.row.substationError == true"
                  style="color: red"
                  >分站故障</span
                >
                <span v-if="scope.row.error == false"  style="color: #67c23a">在线</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="pointInfo" :class="{ pointInfo2: screenWidth < 1920 }">
        <div class="pointInfo_head">
          <div
            class="title"
            :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }"
          >
            <img src="@/assets/images/图标.svg" alt="" />
            <div>
              <span>测点信息（仓库）</span>
              <span style="color: rgba(34, 68, 119, 0.8); font-size: 14px">
                <span
                  >报警<span style="margin-left: 5px; color: red">{{
                    state.baojingData.length
                  }}</span></span
                >
                <span style="margin-left: 10px"
                  >故障<span style="margin-left: 5px; color: red">{{
                    state.lixianData.length
                  }}</span></span
                >
              </span>
            </div>
          </div>
          <div class="btns globalFontSize">
            <!-- <div class="btn_item">全部</div>
            <div class="btn_item">模拟量</div>
            <div class="btn_item">开关量</div> -->
            <!-- <div
              class="btn_item"
              v-for="(item, index) in state.tabLabel"
              :key="index"
            >
              <span
                :class="{ tabActive: state.tabIndex === index }"
                @click="tabSelectFn(index)"
                >{{ item }}</span
              >
            </div> -->
          </div>
          <!-- <div class="imgs">
            <img
              v-if="!isDark"
              src="@/assets/images/home/历史记录.svg"
              alt=""
              style="margin: 0 1rem 0 0"
            />
            <img
              v-if="isDark"
              src="@/assets/images/home/历史记录2.svg"
              alt=""
              style="margin: 0 1rem 0 0"
            />
            <img
              v-if="!isDark"
              src="@/assets/images/home/搜索.svg"
              alt=""
              style="margin: 0"
            />
            <img
              v-if="isDark"
              src="@/assets/images/home/搜索2.svg"
              alt=""
              style="margin: 0"
            />
          </div> -->
        </div>
        <div class="line" style="margin: 0 0 0.625rem 0"></div>
        <div class="pointInfo_box">
          <el-table
            :data="state.cedianTableData"
            border
            :row-style="rowStyle"
            row-class-name="rowHeight"
            cell-class-name="cellBorder"
            header-row-class-name="header"
            header-cell-class-name="header"
            class="table tableFontSize"
            :header-row-style="{
              backgroundColor: isDark ? '#2b5477' : '#e3effe',
            }"
          >
            <!-- <el-table-column type="index" label="编号"/> -->
            <el-table-column show-overflow-tooltip prop="code" label="编号">
              <template #default="{ row }">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <!-- <img src="@/assets/images/home/五角星.svg" alt="" /> -->
                  <span style="margin-left: 5px">{{ row.pointNumber }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="installPlace"
              label="安装地点"
            />
            <el-table-column
              show-overflow-tooltip
              prop="pointName"
              label="名称"
            />
            <el-table-column
              sortable=""
              show-overflow-tooltip
              prop="realTimeValue"
              label="监测值"
            >
            <template #default="{ row }">
                <!-- highFaultValue   lowFaultValue -->
                {{ row.error == true&&row.alarm == false?'-': row["realTimeValue"] }} 
              </template>
            </el-table-column>
            <el-table-column
              sortable=""
              show-overflow-tooltip
              prop="faultMode"
              label="报警模式"
            >
            <!-- <template #default="{ row }">
              </template> -->
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="num3" label="单位" /> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="highFaultValue"
              label="低报警"
               v-if="row.faultModeValue==1"
            >
              <template #default="{ row }">
             {{ row["lowFaultValue"] }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="highFaultValue"
              label="高报警"
               v-if="row.faultModeValue==2"
            >
              <template #default="{ row }">
               <span>
                {{ row["highFaultValue"] }}
               </span>
              </template>
            </el-table-column> -->
            <el-table-column
              show-overflow-tooltip
              prop="highFaultValue"
              label="高/低报警"
            >
              <template #default="{ row }">
                <!-- highFaultValue   lowFaultValue -->
                <span v-if="row.faultModeValue==0">
               -
               </span>
               <span v-if="row.faultModeValue==1">
               {{ row["lowFaultValue"] }}
               </span>
               <span v-if="row.faultModeValue==2">
                {{ row["highFaultValue"] }}
               </span>
               <span v-if="row.faultModeValue==3">
                {{ row["highFaultValue"] }} / {{ row["lowFaultValue"] }}
               </span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="statusName"
              label="状态"
            >
              <template #default="scope">
                <span :style="scope.row.error == true? 'color: red' : 'color:#67c23a'"
                  >{{ scope.row.statusName }}</span
                >
                <!-- <span v-if="scope.row.alarm == true||scope.row.statusName == '报警'" style="color: red"
                  >报警</span
                >
                <span v-if="scope.row.calibration == true||scope.row.statusName == '标校'" style="color: red">标校</span>
                <span v-if="scope.row.error == true||scope.row.statusName == '故障'" style="color: red"
                  >故障</span
                >
                <span v-if="scope.row.offLine == true||scope.row.statusName == '断线'" style="color: red"
                  >断线</span
                >
                <span v-if="scope.row.powerOff == true||scope.row.statusName == '断电'" style="color: red">断电</span>
                <span v-if="scope.row.statusName == '正常'" style="color: #67c23a">正常</span> -->
              </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="" label="操作">
              <template #default="{ row }">
                <img src="@/assets/images/home/标校折线图.svg" alt="" />
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <el-pagination
          class="pages globalFontSize"
          v-model:current-page="state.page.currentPage"
          v-model:page-size="state.page.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- <div class="output" :class="{ output2: screenWidth < 1920 }">
        <div class="output_head">
          <div
            class="title"
            :style="{ fontSize: pagesStore.sizeNum + 2 + 'px' }"
          >
            <img src="@/assets/images/图标.svg" alt="" />
            <div>输出设备</div>
          </div>
        </div>
        <div class="line"></div>
        <div class="output_box">
          <div class="shuchushebei">
            <div class="shuchushebei_head">
              <span class="head-left">002C02</span>
              <span class="head-right" @click="zhankaiFn">
                <span>{{ state.zhankaiFlag ? "收起" : "展开" }}</span>
                <el-icon
                  :style="{
                    transform: state.zhankaiFlag ? 'rotate(-180deg)' : '',
                  }"
                  ><ArrowDown
                /></el-icon>
              </span>
            </div>
            <div class="shuchushebei_body">
              <div v-for="(item, index) in state.title" :key="index">
                <div style="display: flex; align-items: center">
                  <span>{{ item }}</span>
                  <span class="bar"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script setup>
import useSettingsStore from "@/store/modules/settings";
import { onUnmounted, reactive, watch } from "vue";
import axios from "@/utils/request";
import * as echarts from "echarts";
import usePagesStore from "@/store/modules/pages";
const pagesStore = usePagesStore();
const router = useRouter();
const storageSetting2 = JSON.parse(localStorage.getItem("layout-set"));
const settingsStore = useSettingsStore();
const isDark = computed(() => settingsStore.isDark);
let state = reactive({
  zhankaiFlag: false,
  title: ["002A01", "002A02", "002A03"], //标题列表
  color: [
    "rgba(232, 232, 232, 1)",
    "rgba(232, 232, 232, 1)",
    "rgba(232, 232, 232, 1)",
  ], //颜色列表
  color2: [
    "rgba(212, 48, 48, 1)",
    "rgba(255, 141, 26, 1)",
    "rgba(67, 207, 124, 1)",
  ], //颜色列表
  value: [80, 60, 45], //数据（x轴的大小）
  fenzhanSelectValue: "全部",
  fenzhanSelectData: [{ value: "全部", label: "全部" }],
  tabLabel: ["全部", "模拟量", "开关量"],
  tabIndex: 0,
  page: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  fenzhanValue: {},
  cedianValue: {},
  dianyuanValue: {},
  fenzhanTableData: [], //分站表格数据
  cedianTableData: [], //测点表格数据
  baojingData: [], //报警数据
  lixianData: [], //离线数据
  timeId: null,
});

// 获取当前屏幕的宽度
const screenWidth = ref(window.innerWidth);
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
  const historyRouterFn = (item) => {
    const now = new Date();
  const dayOfWeek = now.getDay();
  const dayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const start = new Date(now);
  start.setDate(start.getDate() + dayOffset);
  const end = new Date(start);
  end.setDate(end.getDate() + 6);

router.push({
    path: "/lssb/cdgzjl",
    query: {
      start: formatDate(start),
      end: formatDate(end),
      type: item,
    },
  });
  }
//本周标校
const biaoxiaoRouterFn = () => {
  const now = new Date();
  const dayOfWeek = now.getDay();
  const dayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const start = new Date(now);
  start.setDate(start.getDate() + dayOffset);
  const end = new Date(start);
  end.setDate(end.getDate() + 6);
  //跳转到标校页面
  router.push({
    path: "/lssj/bx",
    query: {
      start: formatDate(start),
      end: formatDate(end),
    },
  });
};

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  state.page.pageSize = val;
  getCedianList();
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  state.page.currentPage = val;
  getCedianList();
};
// 获取首页顶部数据
const getHomeTop = () => {
  //分站概要数据
  axios.post("/history/substation/summary", {}).then((res) => {
    if (res.data) {
      state.fenzhanValue = {
        errorCount: res.data.errorCount,
        normalCount: res.data.normalCount,
      };
    }
  });
  //测点概要数据
  axios.post("/history/stats/point/summary", {}).then((res) => {
    if (res.data) {
      state.cedianValue = {
        errorCount: res.data.errorCount,
        normalCount: res.data.normalCount,
      };
    }
  });
  //电源概要数据
  axios.post("/history/power/summary", {}).then((res) => {
    if (res.data) {
      state.dianyuanValue = {
        errorCount: res.data.errorCount,
        normalCount: res.data.normalCount,
      };
    }
  });
};
const getFenzhanList = () => {
  //分站历史数据（暂用，后期改实时数据）
  axios
    .post("/history/substation/list", {
      pageNum: 1,
      pageSize: 999,
    })
    .then((res) => {
      state.fenzhanTableData = res.rows;
    });
  // //分站实时数据
  // axios.get('/realTime/detail/substation',{
  //     pageNum:1,
  //   pageSize:999,
  // }).then((res) => {
  //   if(res.data){
  //     state.fenzhanTableData = res.data;
  //   }
  // })
};
const getCedianList = () => {
  //测点历史数据（暂用，后期改实时数据）
  let arr = [];
  let arr2 = [];
  axios
    .post("/history/stats/point/list", {
      pageNum: state.page.currentPage,
      pageSize: state.page.pageSize,
    })
    .then((res) => {
      state.cedianTableData = res.rows;
      state.page.total = res.total;
      res.rows.forEach((item) => {
        if (item.alarm) {
          arr.push(item.alarm);
        }
        if (item.error&&item.alarm==false) {
          arr2.push(item.error);
        }
      });
      state.baojingData = arr;
      state.lixianData = arr2;
    });
  // //测点实时数据
  // axios.get('/realTime/detail/point',{
  //     pageNum:state.page.currentPage,
  //   pageSize:state.page.pageSize,
  // }).then((res) => {
  // state.cedianTableData = res.rows;
  // state.page.total = res.total;
  // })
};
const selectChangeFn = (value) => {
  //分站历史数据（暂用，后期改实时数据）
  axios
    .post("/history/substation/list", {
      pageNum: 1,
      pageSize: 999,
      address: value == "全部" ? null : value,
    })
    .then((res) => {
      state.fenzhanTableData = res.rows;
    });
  // //分站实时数据
  // axios.get('/realTime/detail/substation',{
  //     pageNum:1,
  //   pageSize:999,
  // address:value,
  // }).then((res) => {
  //   if(res.data){
  //     state.fenzhanTableData = res.data;
  //   }
  // })
};
const getSelect = () => {
  axios.get("/history/stats/point/installPlace/list").then((res) => {
    if (res.data) {
      state.fenzhanSelectData = res.data.map((item) => {
        return { value: item, label: item };
      });
      state.fenzhanSelectData.unshift({ value: "全部", label: "全部" });
    }
  });
};
// 表格tab切换
const tabSelectFn = (index) => {
  state.tabIndex = index;
};
//展开收起
const zhankaiFn = () => {
  state.zhankaiFlag = !state.zhankaiFlag;
  // state.title.push("002A04");
  // getEchartsFn();
};
//输出设备图表
const getEchartsFn = () => {
  var myEchart = document.getElementsByClassName("bar"); //获取类名
  //此处for循环多次初始化 echarts 实例
  for (var i = 0; i < myEchart.length; i++) {
    var myChart = echarts.init(myEchart[i]); //初始化echarts实例要在for循环内
    const builderJson = {
      all: 100,
      charts: {
        map: state.value[i],
      },
    };
    let option = {
      // title: {
      //   text: state.title[i],
      //   subtext: '总计 ' + builderJson.all,
      //   left: '170',
      //   top: '50',
      //   textAlign: 'center'
      // },
      // grid: {
      //   // 水平垂直居中
      //   top: 140,
      //   left: "center",
      //   width: 310,
      //   height: 20,
      //   // grid 区域不包含坐标轴的刻度标签
      //   containLabel: false,
      // },
      // x轴y轴不显示
      xAxis: [
        {
          type: "value",
          max: builderJson.all,
          show: false,
        },
      ],
      yAxis: [
        {
          type: "category",
          show: false,
        },
      ],
      tooltip: {
        trigger: "axis",
        backgroundColor: "#595959", // 提示框浮层的背景颜色。
        borderRadius: 5,
        // formatter: function (params) {
        //   console.log(params);
        //   // 自定义显示的内容
        //   return params[0].value;
        // },
        textStyle: {
          // 修改文本样式
          color: "#fff",
          fontSize: 14,
        },
      },
      // tooltip: {
      //     // trigger: "axis",
      //     axisPointer: {
      //       type: "bar",
      //       // shadowStyle: {
      //       //   color: "rgba(81, 127, 253, 0.1)",
      //       // },
      //       // label: {
      //       //   label: {
      //       //     show: true,
      //       //     backgroundColor: "transparent",
      //       //   },
      //       //   shadowStyle: {
      //       //     color: "rgba(81, 127, 253, 0.1)",
      //       //   },
      //       // },
      //     },
      //     backgroundColor: "#595959", // 提示框浮层的背景颜色。
      //     borderRadius: 5,
      //     textStyle: {
      //       // 提示框浮层的文本样式。
      //       color: "#fff",
      //     },
      //     className: "my-tooltip-box",
      //     // formatter: function (params) {
      //     //   console.log(params);
      //     //   // const s1 = `<span style="display:inline-block;margin-right:4px;width:10px;height:10px;border-radius:50%;vertical-align:middle;background-color:#409EFF;"></span>`;
      //     //   // const s2 = `<span style="display:inline-block;margin-right:4px;width:10px;height:10px;border-radius:50%;vertical-align:middle;background-color:#00EAFF;"></span>`;
      //     //   // const s3 = `<span style="display:inline-block;margin-right:4px;width:10px;height:10px;border-radius:50%;vertical-align:middle;background-color:#58CC94;"></span>`;
      //     //   return params.value;
      //     //   // return (
      //     //   //   params[0].data[0] +
      //     //   //   `<br/>` +
      //     //   //   s1 +
      //     //   //   params[0].dimensionNames[1] +
      //     //   //   ": " +
      //     //   //   `<span style="color:#409EFF;">${params[0].data[1]}</span>` +
      //     //   //   "m³/h" +
      //     //   //   "<br/>" +
      //     //   //   s2 +
      //     //   //   params[0].dimensionNames[2] +
      //     //   //   ": " +
      //     //   //   `<span style="color:#00EAFF;">${params[0].data[2]}</span>` +
      //     //   //   "m³/h" +
      //     //   //   `<br/>` +
      //     //   //   s3 +
      //     //   //   params[0].dimensionNames[3] +
      //     //   //   ": " +
      //     //   //   `<span style="color:#58CC94;">${params[0].data[3]}</span>` +
      //     //   //   "m³/h"
      //     //   // );
      //     //   // var str = '<div class="my-tooltip">';
      //     //   // params.forEach((el) => {
      //     //   //   if (el.seriesName !== "maxdata") {
      //     //   //     str += `<div><span class="name large">${el.name}</span><br/><span class="value">水质浊度：${el.value}m3/h</span></div>`;
      //     //   //   }
      //     //   // });
      //     //   // str += "</div>";
      //     //   // return str;
      //     // },
      //   },
      series: [
        // 蓝色条
        {
          type: "bar",
          // 数据堆叠，设置相同的chart值便可堆叠放置
          stack: "chart",
          // color: state.color[i],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: state.color[i],
              },
              {
                offset: 1,
                color: state.color2[i],
              },
            ]),
          },
          z: 3,
          // 数据标签
          label: {
            position: "right",
            show: false,
          },
          barWidth: 12,
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
          }),
        },
        // 灰色条
        {
          type: "bar",
          // 数据堆叠，设置相同的chart值便可堆叠放置
          stack: "chart",
          silent: true,
          itemStyle: {
            color: "#eee",
          },
          // barWidth: 12,
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
          }),
        },
      ],
    };
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  }
};
function rowStyle({ row, rowIndex }) {
  if (rowIndex % 2 !== 0) {
    return { "background-color": "#f0f3f9" };
  } else {
    return { "background-color": "" };
  }
}
onMounted(() => {
  getHomeTop();//顶部数据
  getFenzhanList(); //分站数据
  getCedianList(); //测点数据

  // 设置定时器
  state.timeId = setInterval(function () {
    getHomeTop();//顶部数据
    getFenzhanList(); //分站数据
    getCedianList(); //测点数据
    console.log("首页分站数据和测点数据刷新代码每隔5秒执行一次");
  }, 5000);
  // // 5秒后停止定时器
  // setTimeout(function() {
  //     clearInterval(timerId);
  // }, 5000);
  getSelect();
  getEchartsFn();
  window.addEventListener("resize", () => {
    // 获取当前屏幕的宽度
    screenWidth.value = window.innerWidth;
  });
  if (isDark.value) {
    document
      .querySelector(":root")
      .style.setProperty("--el-bg-color-overlay", "#386c96");
    document
      .querySelector(":root")
      .style.setProperty("--el-fill-color-light", "#4e7299");
    document
      .querySelector(":root")
      .style.setProperty("--el-text-color-regular", "#fff");
  } else {
    document
      .querySelector(":root")
      .style.setProperty("--el-bg-color-overlay", "#fff");
    document
      .querySelector(":root")
      .style.setProperty("--el-fill-color-light", "#f5f7fa");
    document
      .querySelector(":root")
      .style.setProperty("--el-text-color-regular", "#606266");
  }
});
onUnmounted(() => {
  clearInterval(state.timeId);
})
onBeforeUnmount(() => {
  window.addEventListener("resize", () => {
    // 获取当前屏幕的宽度
    screenWidth.value = window.innerWidth;
  });
  document
    .querySelector(":root")
    .style.setProperty("--el-bg-color-overlay", "#fff");
  document
    .querySelector(":root")
    .style.setProperty("--el-fill-color-light", "#f5f7fa");
  document
    .querySelector(":root")
    .style.setProperty("--el-text-color-regular", "#606266");
});
watch(
  () => isDark.value,
  () => {
    if (isDark.value) {
      document
        .querySelector(":root")
        .style.setProperty("--el-bg-color-overlay", "#386c96");
      document
        .querySelector(":root")
        .style.setProperty("--el-fill-color-light", "#4e7299");
      document
        .querySelector(":root")
        .style.setProperty("--el-text-color-regular", "#fff");
    } else {
      document
        .querySelector(":root")
        .style.setProperty("--el-bg-color-overlay", "#fff");
      document
        .querySelector(":root")
        .style.setProperty("--el-fill-color-light", "#f5f7fa");
      document
        .querySelector(":root")
        .style.setProperty("--el-text-color-regular", "#606266");
    }
  }
);
</script>
<style lang="scss" scoped>
@import "@/assets/styles/page-edit.scss";
.point_box2 {
  width: 77.4% !important;
}
.qeuick2 {
  width: 22% !important;
}
.table2 {
  width: 100% !important;
}
.pointInfo2 {
  width: 56.5% !important;
}
.substation2 {
  width: 22.5% !important;
}
.output2 {
  width: 19.7% !important;
}

// 深色样式
.dark_point_box {
  background: url("/src/assets/images/home/bg2.png") !important;
  .point_box_left .title {
    color: #fff !important;
  }
  .point_box_left .search_box {
    background: #355d7e !important;
  }
  ::v-deep .el-input__wrapper {
    background: #355d7e !important;
  }
  .items_num {
    color: #fff !important;
  }
}
.dark_quick {
  background: #476383 !important;
  .quick_head .title {
    color: #fff !important;
  }
  .quick_box .items {
    color: #fff !important;
    .img {
      background: #5287b5 !important;
    }
  }
}
.dark_bottom {
  .title {
    color: #fff !important;
  }
  .line {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  .substation {
    background-color: #476383 !important;
    .select_box {
      color: #fff !important;
      ::v-deep .el-input__wrapper {
        background-color: #386c96 !important;
        box-shadow: none;
        .el-input__inner::-webkit-input-placeholder {
          color: #fff; // 初始化的文字颜色
        }
      }
    }
    // 设置行的背景颜色
    ::v-deep .el-table tr {
      background-color: #476383 !important;
    }
    ::v-deep .el-table__body tr:nth-child(even) {
      background-color: #476383 !important; /* 偶数行（斑马线）的默认背景色 */
    }
    ::v-deep
      .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background-color: #346288 !important;
    }
    ::v-deep .el-table tbody tr > td {
      color: #fff;
      border: none;
    }
    //自定义斑马线和鼠标移入样式
    ::v-deep
      .el-table--enable-row-hover
      .el-table__body
      tr:hover:nth-child(even)
      > td {
      background-color: rgba(110, 185, 255, 0.18) !important;
    }
    ::v-deep
      .el-table--enable-row-hover
      .el-table__body
      tr:hover:nth-child(odd)
      > td {
      background-color: rgba(110, 185, 255, 0.18) !important;
    }
  }
  .pointInfo {
    background-color: #476383 !important;
    .pointInfo_head .btns {
      color: #fff !important;
    }
    .pointInfo_box {
      ::v-deep .el-table tr {
        background-color: #476383 !important;
      }
      ::v-deep .el-table__body tr:nth-child(even) {
        background-color: #476383 !important; /* 偶数行（斑马线）的默认背景色 */
      }
      ::v-deep
        .el-table--striped
        .el-table__body
        tr.el-table__row--striped
        td.el-table__cell {
        background-color: #346288 !important;
      }
      ::v-deep .el-table tbody tr > td {
        color: #fff;
        border: none;
      }
      //自定义斑马线和鼠标移入样式
      ::v-deep
        .el-table--enable-row-hover
        .el-table__body
        tr:hover:nth-child(even)
        > td {
        background-color: rgba(110, 185, 255, 0.18) !important;
      }
      ::v-deep
        .el-table--enable-row-hover
        .el-table__body
        tr:hover:nth-child(odd)
        > td {
        background-color: rgba(110, 185, 255, 0.18) !important;
      }
    }
    .pages {
      ::v-deep .el-pagination__total {
        color: #fff;
      }
      ::v-deep .el-pagination__jump {
        color: #fff;
      }
      ::v-deep .el-input__wrapper {
        background-color: #386c96 !important;
        box-shadow: none;
        .el-input__inner {
          color: #fff;
        }
      }
      ::v-deep .el-pager li {
        background: #325f85 !important;
        color: rgba(255, 255, 255, 0.65) !important;
      }
      ::v-deep .el-pager .is-active {
        background-color: #16c2f2 !important;
        color: #fff !important;
      }
      ::v-deep .btn-next {
        background: #325f85 !important;
        color: #fff !important;
      }
      ::v-deep .btn-prev {
        background: #325f85 !important;
        color: #fff !important;
      }
    }
  }
  .output {
    background-color: #476383 !important;
    .output_box .items {
      background-color: #30699b !important;
      .items_name {
        color: #fff !important;
      }
      .location {
        background-color: #285f8f !important;
        color: #fff !important;
      }
    }
  }
}

::v-deep .el-table .cell {
  padding: 0 !important;
  text-align: center;
  font-size: 14px;
  // background-color: #476383 !important;
  // color: #fff;
}
// ::v-deep .el-table__body tr:nth-child(even) {
//   background-color: #{$stripe-bg} !important; /* 偶数行（斑马线）的默认背景色 */
//   // background-color: #f0f3f9 !important; /* 偶数行（斑马线）的默认背景色 */
// }
// ::v-deep
//   .el-table--striped
//   .el-table__body
//   tr.el-table__row--striped
//   td.el-table__cell {
//   background-color: #{$stripe-bg} !important;
//   // background-color: #f0f3f9 !important;
// }

// //自定义斑马线和鼠标移入样式
// ::v-deep
//   .el-table--enable-row-hover
//   .el-table__body
//   tr:hover:nth-child(even)
//   > td {
//   background-color: #e3effe !important;
// }
// ::v-deep
//   .el-table--enable-row-hover
//   .el-table__body
//   tr:hover:nth-child(odd)
//   > td {
//   background-color: #e3effe !important;
// }

.box {
  padding: 0.75rem;
  width: 100%;
  height: 100%;
  overflow: auto;
  .top {
    width: 100%;
    height: 7.875rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .point_box {
      padding: 0.75rem;
      // width: 66.7%;
      width: 79.3%;
      height: 100%;
      border-radius: 0.5rem;
      background: url("/src/assets/images/home/top-bg.png");
      background-size: cover; /* 背景图片覆盖整个容器 */
      background-position: center; /* 背景图片居中 */
      background-repeat: no-repeat; /* 背景图片不重复 */
      display: flex;
      align-items: flex-end;
      .point_box_left {
        width: 27%;
        height: 100%;
        display: flex;
        // flex-direction: column;
        align-items: center;
        justify-content: end;
        .title {
          font-size: 20px;
          color: #fff;
          font-weight: 700;
        }
        .search_box {
          padding: 0.5625rem;
          width: 100%;
          height: 3.3125rem;
          border-radius: 0.375rem;
          background: linear-gradient(
            180deg,
            rgba(227, 236, 255, 1) 0%,
            rgba(255, 255, 255, 0.72) 100%
          );
          display: flex;
          justify-content: space-between;
        }
      }
      .data_show {
        margin: 0 0 0 2.375rem;
        // width: 51.25rem;
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-evenly;
        .items {
          // width: 10.5625rem;
          height: 100%;
          display: flex;
          align-items: center;
          img {
            width: 5.1875rem;
            height: 5.1875rem;
          }
          .items_num {
            // font-size: .875rem;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
    .quick {
      padding: 0.75rem;
      // width: 32.781%;
      width: 20%;
      height: 100%;
      // background-color: #f1f5fd;
      background-color: #fff;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .quick_head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 1rem;
          font-weight: 500;
          color: rgba(34, 68, 119, 1);
          display: flex;
          align-items: center;
          div {
            margin: 0 0 0 0.25rem;
          }
        }
      }
      .quick_box {
        height: 3.5rem;
        display: flex;
        justify-content: space-between;
        .items {
          // width: 3.125rem;
          height: 3.5rem;
          font-size: 0.75rem;
          color: rgba(34, 68, 119, 1);
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          .img {
            width: 2rem;
            height: 2rem;
            background-color: #fff;
            border-radius: 0.375rem;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .items:hover {
          cursor: pointer;
        }
      }
    }
  }
  .bottom {
    .title {
      font-size: 1rem;
      font-weight: 700;
      color: rgba(34, 68, 119, 1);
      display: flex;
      align-items: center;
      div {
        margin: 0 0 0 0.25rem;
      }
    }
    .line {
      margin: 0.1875rem 0 0.625rem 0;
      width: 100%;
      height: 0.0625rem;
      background-color: rgba(34, 68, 119, 0.1);
    }
    margin: 0.75rem 0 0 0;
    width: 100%;
    height: calc(100% - 8.625rem);
    display: flex;
    justify-content: space-between;
    // background: #000;
    .substation {
      // width: 24.5%;
      width: 20%;
      height: 100%;
      background-color: #fff;
      border-radius: 0.5rem;
      .substation_head {
        padding: 0.75rem;
        display: flex;
        justify-content: space-between;
        .title {
          align-items: flex-end;
        }
      }
      .select_box {
        padding: 0 0.8125rem;
        margin: 0 0 0.75rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.875rem;
        color: rgba(34, 68, 119, 1);
      }
      .table {
        padding: 0 0.75rem;
        height: calc(100% - 7.5rem);
      }
    }
    .pointInfo {
      flex: 1;
      width: 58.5%;
      margin: 0 0px 0 10px;
      height: 100%;
      background-color: #fff;
      border-radius: 0.5rem;
      position: relative;
      .pointInfo_head {
        padding: 0.5625rem 0.75rem;
        display: flex;
        justify-content: space-between;
        .btns {
          width: 20.4375rem;
          height: 1.875rem;
          font-size: 0.875rem;
          color: rgba(34, 68, 119, 1);
          display: flex;
          justify-content: space-between;
          .btn_item {
            width: 5.5rem;
            height: 1.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3.125rem;
          }
          .tabActive {
            display: inline-block;
            color: rgba(64, 158, 255, 1);
            border-radius: 22.54px;
            background: rgba(64, 158, 255, 0.2);
            padding: 3px 20px;
          }
        }
        .imgs {
          display: flex;
          align-items: center;
        }
        .btns:hover {
          cursor: pointer;
        }
      }
      .pointInfo_box {
        padding: 0 0.75rem;
        width: 100%;
        height: calc(100% - 8.75rem);
        display: flex;
        justify-content: space-between;
        .table {
          // width: 49.57%;
          height: 100%;
        }
      }
      .pages {
        position: absolute;
        bottom: 1.25rem;
        right: 0.625rem;
      }
    }
    .output {
      // width: 15.7%;
      width: 20%;
      height: 100%;
      background-color: #fff;
      border-radius: 0.5rem;
      .output_head {
        padding: 0.75rem;
      }
      .output_box {
        padding: 0 0.75rem;
        height: calc(100% - 4.5rem);
        overflow-y: auto;
        overflow-x: hidden;
        .items {
          padding: 0.5rem;
          margin: 0 0 0.75rem 0;
          height: 7.75rem;
          background: #f3f7fe;
          border-radius: 0.375rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 0.875rem;
          .items_name {
            // font-size: .875rem;
            color: rgba(34, 68, 119, 1);
            display: flex;
            justify-content: space-between;
            .state {
              // font-size: .75rem;
              color: rgba(0, 186, 173, 1);
              display: flex;
              align-items: center;
              .point {
                margin: 0 0.25rem 0 0;
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                background: rgba(0, 186, 173, 1);
              }
            }
          }
          .location {
            padding: 0.75rem;
            width: 100%;
            height: 4.375rem;
            background-color: #fff;
            border-radius: 0.25rem;
            // font-size: .875rem;
            color: rgba(34, 68, 119, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .l_titile {
              display: flex;
              align-items: center;
              img {
                margin-right: 0.25rem;
              }
            }
            .l_info {
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
.shuchushebei {
  .shuchushebei_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .head-left {
      font-weight: 700;
      font-size: 20px;
    }
    .head-right {
      color: rgba(53, 140, 240, 1);
      cursor: pointer;
      font-size: 16px;
    }
  }
  .shuchushebei_body {
    margin-top: 10px;
    .bar {
      width: 300px;
      height: 25px;
      margin-top: 5px;
    }
  }
}
</style>